@import "../../../base/base";
@prefix:medical-center;
.@{prefix}{
  background: url("./img/banner.jpg") no-repeat center;
  background-size: cover;
  padding-top: 1px;
  padding-bottom: 50px;
  .max-media(1200px,{padding-bottom: 0px});
  .@{prefix}-container {
    max-width: @box-width;
    margin: 0 auto;
    h1 {
      .title(#fff)
    }
    .@{prefix}-row {
      .max-media(1200px,{display: none});
      .@{prefix}-list-container {
        width: 470px;
        background: #f0f0f0;
        padding: 50px 15px;
        margin-bottom: 10px;
        li {
          margin: 5.4px 0;
        }
      }
      .@{prefix}-col {
        width: 358px;
        overflow: hidden;
        margin-bottom: 10px;
        .@{prefix}-img-container {
          position: relative;
          img {
            width: 100%;
          }
          .@{prefix}-content {
            position: absolute;
            padding: 0 10px;
            left: 0;
            bottom: 10px;
            color: #fff;
            display: none;
            z-index: 99;
          }
          .@{prefix}-dialog {
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .3);
            left: 0;
            bottom: -100%;
            -webkit-transition: 300ms;
            -moz-transition: 300ms;
            -ms-transition: 300ms;
            -o-transition: 300ms;
            transition: 300ms;
          }
        }
        &:hover {
          .@{prefix}-content {
            display: block;
          }
          .@{prefix}-dialog {
            bottom: 0;
          }
        }
      }
      #col-4 {
        width: 470px;
      }
    }
    .@{prefix}-mobile-list{
      display: none;
      width: 100%;
      background:#e6e4e4;
      padding: 30px 10px;
      .max-media(1200px,{display: block});
      li {
        margin: 6px 0;
        list-style: disc;
      }
    };
  }
}